<template>
    <div id="app">
        <!--<van-pull-refresh v-model="isLoading" success-text="刷新成功" @refresh="reload">-->

        <keep-alive :include="include" :max="10">
            <router-view />
        </keep-alive>
        <!--<router-view v-if='!$route.meta.keepAlive'></router-view>-->
        <!--</van-pull-refresh>-->
    </div>
</template>

<script>
    function isKeepAlive($route) {
        return $route.meta.keepAlive === undefined || $route.meta.keepAlive;
    }

    export default {
        name: 'App',
        provide() {
            return {
                //reload: this.reload,
            }
        },
        data() {
            return {
                transitionName: "fold-right",
                isRouterAlive: true,
                isLoading: false,
                include: isKeepAlive(this.$route) ? [this.$route.name] : [],
                history: []
            }
        },
        watch: {
            $route(to, from) {
                const lastPath = this.history[this.history.length - 1] || {},
                    { isReplace, isBack } = this.$router;

                if (lastPath.path === to.path) {
                    this.transitionName = "fold-right";
                    this.history.pop();
                } else {
                    this.transitionName = "fold-left";
                    if (!isReplace) this.history.push({ path: from.path, name: from.name });
                }

                if (isKeepAlive(to) && to.name !== "Login") {
                    !this.include.includes(to.name) && this.include.push(to.name);
                }

                if (isKeepAlive(from) && isBack) {
                    var index = this.include.indexOf(from.name);
                    index !== -1 && this.include.splice(index, 1);
                }

                this.$router.isBack = false;
                this.$router.isReplace = false;

            }
        },

        mounted(){
            //vConsole
            //var vConsole = new VConsole();
        },

        methods: {
            reload() {
                // var that = this;
                // that.isRouterAlive = false;
                // that.$nextTick(function () {
                //     that.isLoading = false;
                //     that.isRouterAlive = true
                // })
            },
        },

    }
</script>

<style lang="scss">
    @import "./assets/scss/common.scss";
</style>
<style lang="scss">
    .router {
        position: absolute;
        width: 100%;
    }

    .fold-left-enter-active {
        animation-name: fold-left-in;
        animation-duration: 0.5s;
    }

    .fold-left-leave-active {
        animation-name: fold-left-out;
        animation-duration: 0.5s;
    }

    @keyframes fold-left-in {
        0% {
            -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
        }
        10% {
            -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
        }
        100% {
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }
    }

    @keyframes fold-left-out {
        0% {
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }
        10% {
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }
        100% {
            -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
        }
    }

    .fold-right-enter-active {
        animation-name: fold-right-in;
        animation-duration: 0.5s;
    }

    .fold-right-leave-active {
        animation-name: fold-right-out;
        animation-duration: 0.5s;
    }

    @keyframes fold-right-in {
        0% {
            width: 100%;
            -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
        }
        10% {
            width: 100%;
            -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
        }
        100% {
            width: 100%;
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }
    }

    @keyframes fold-right-out {
        0% {
            width: 100%;
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }
        10% {
            width: 100%;
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }
        100% {
            width: 100%;
            -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
        }
    }
</style>
